<template>
  <div class="min-1 middle">
    <div class="yin-1">应用主题</div>
    <div class="min-2">
      <el-button
        @click="topic(item)"
        v-for="(item, index) in themeList"
        :key="index"
        class="but-1"
        :class="{ botn: ac === index }"
        >{{ item.label }}</el-button
      >
      <div class="ge-1" @click="more" v-if="themeList.length > 9">更多</div>
    </div>
  </div>
  <div class="min-1 mis-1 middle">
    <div class="yin-1">应用类型</div>
    <div class="min-2">
      <el-button
        v-for="(item, index) in themeList1"
        :key="index"
        :class="{ botn: ab === index }"
        @click="type(item)"
        >{{ item.label }}</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { arrss1 } from '@/services/types/Applic'
const props = defineProps<{
  themeList: arrss1
  themeList1: arrss1
}>()
const emit = defineEmits<{
  (e: 'more'): void
  (e: 'topic', item: any): void
  (e: 'type', item: any): void
}>()
const ac = ref(0)
const ab = ref(0)
const more = () => {
  emit('more')
}
const topic = (item: any) => {
  ac.value = props.themeList.indexOf(item)
  emit('topic', item)
}
const type = (item: any) => {
  ab.value = props.themeList1.indexOf(item)
  emit('type', item)
}
</script>

<style lang="scss" scoped>
.min-1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.min-2 {
  width: 800px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.yin-1 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  color: #fff;
}
.mis-1 {
  margin-top: 10px;
}
.ge-1 {
  margin-left: 10px;
  cursor: pointer;
  color: #fff;
}
.but-1 {
  margin-bottom: 3px;
}
.botn {
  background: #008c3e;
  color: #000;
}
</style>
